.chat {
    width: 800px;
    height: 600px;
    margin: 20px;
    display: flex;
    position: relative;

    &_room-list {
        width: 150px;
        border: 1px solid #000;
        overflow-y: auto;

        .room-item {
            line-height: 50px;
            text-align: center;
            border: 1px solid #000;
            cursor: pointer;

            &:hover,
            &--selected {
                background-color: lightgreen;
            }
        }
    }

    &_message-list {
        flex: 1;
        border: 1px solid #000;
        overflow-y: auto;
        height: calc(100% - 100px);
        border-bottom: none;

        .message-item {
            padding: 20px;
            display: flex;
            flex-wrap: wrap;

            .message-sender {
                width: 100%;

                img {
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                }
            }

            .message-content {
                border: 1px solid #000;
                padding: 10px 20px;
                border-radius: 4px;
                background-color: skyblue;
            }

            &.from-me {
                text-align: right;
                justify-content: right;

                .message-content {
                    text-align: right;
                    background-color: #fff;
                }
            }
        }
    }

    &_message-input {
        width: 650px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        bottom: 0;
        right: 0;

        .message-type {
            display: flex;

            &_item {
                width: 100px;

                &:hover {
                    font-weight: bold;
                    cursor: pointer;
                }
            }
        }

        .message-area {
            display: flex;
            justify-content: space-between;
            width: 650px;

            &_btn {
                width: 50px;
                height: 50px;
            }
        }
    }
}